<template>
    <div id="course-box">
        <div id="course-box-top">
            <h2 v-if="this.type=='free'">免费课程</h2>
            <h2 v-if="this.type=='boutique'">精品课程</h2>
            <h2 v-if="this.type=='discount'">限时折扣课程</h2>
            <span>更多<i class="el-icon-arrow-right"></i></span>
        </div>
        <div id="course-content">
            <ul>
                <li v-for="(item) in courseList" :key="item.courseId">
                    <div style="overflow: hidden;width: 220px;height: 113px">
                        <router-link :to="'/courseDetail?courseId='+item.courseId">
                            <img :src="item.bannerFileUrl" alt="">
                        </router-link>
                    </div>

                    <h5 class="course-title">{{item.courseTitle}}</h5>
                    <h5 class="registeredNum">共 {{item.subSectionNum}} 节课 | {{item.participationsCount}} 人报名</h5>
                    <h4 class="freeLogo" v-if="item.isFree==1">免费</h4>
                    <p class="coursePrice" v-if="item.isFree==0">
                        <span v-if="item.isDiscount==1">&yen;{{item.discountPrice}}<span class="originalPrice">&nbsp;&yen;{{item.coursePrice}}</span></span>
                        <span v-if="item.isDiscount==0"><span class="price">&yen;{{item.coursePrice}}</span></span>
                        <span class="preferential" v-if="item.isDiscount==1">{{item.discountDesc}}</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {getCourseListByType} from "../../../../api";

    export default {
        name: "courseBox",
        methods:{

        },
        data(){
            return {
                courseList:[],
                isDiscount:''
            }
        },
        props:{
            type:String,
            pageNum:String,
            pageSize:String
        },
        created() {
            getCourseListByType(this.type,this.pageNum,this.pageSize).then(res=>{
                this.courseList = res.rows;
            })
        }
    }
</script>

<style scoped lang="less">
    *{
        padding: 0;
        margin: 0;
        border: 0;
    }
                @hoverColor:#00cf8c;
 #course-box{
        width: 1200px;
        margin: auto;
    }
    #course-box-top{
        display: flex;
        margin: 30px auto 15px;
        width:1200px;
        height: 48px;
        text-align: center;
        border-bottom: 2px solid lightgray;
        h2{
            margin: auto;
            padding-left: 64px;
            box-sizing: border-box;
            font-weight: normal;
        }
        span{
            display: block;
            margin-top: 15px;
            cursor:pointer;
        }
    }
    #course-content{
        width: 100%;
        padding-left: 20px;
        ul{
            list-style: none;
        }
        li{
            padding-left: 6px;
            float: left;
            width: 232px;
            height: 245px;
            text-align: left;
            overflow: hidden;
            box-sizing: border-box;
            img{
                width: 220px;
                height: 113px;
                transition: 0.2s linear;
            }
            img:hover{
                transform: scale(1.1,1.1);
                
            }
        }
        li:hover .course-title{
            color: @hoverColor;
            cursor: pointer;
        }
    }
    .course-title{
        margin-top: 3px;
        font-weight: 500;
        color: black;
    }
    .registeredNum{
        margin-top: 5px;
        color: #888;
        font-weight: normal;
    }
    .freeLogo{
        margin-top: 10px;
        color: @hoverColor;
        font-weight: normal;
    }
    .coursePrice{
        margin-top: 10px;
        float: left;
        width: 220px;
        color: #ff4500;
        font-size: 16px;
        line-height: 22px;
    }
    .originalPrice{
        color: #999;
        text-decoration: line-through;
        font-size: 12px;
        line-height: 22px;
    }
    .preferential{
        margin-right: 10px;
        float: right;
        width: 64px;
        height: 22px;
        color: #fa8c16;
        background: #fff7e6;
        border: 1px solid #ffd591;
        box-sizing: border-box;
        border-radius: 2px;
        text-align: center;
        line-height: 22px;
        font-size: 12px;
    }
</style>